<template>
  <div class="search-detail">
    <div class="header-box">
      <div class="header">
        <div class="header-input">
          <el-input maxlength="50" v-model='searchText' class="input-element" @keyup.native.enter="clickSearch"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="clickSearch">搜索</el-button>
        </div>
        <div class="header-tabs">
          <ul class="nav-list">
            <li class="main-nav-list nav-left clearfix">
              <ul class="main-nav-list-container">
                <li class="nav-item link-item" :class="{'active': activeTab === 1}" @click="toggleActive(1)">
                  <i class="icon icon-data-box"></i>
                  公开数据集
                  </li>
                <li class="nav-item link-item" :class="{'active': activeTab === 2}" @click="toggleActive(2)">
                  <i class="icon icon-data-project"></i>
                  公开项目
                  </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class='content'>
      <div class="content-inner">
        <p class="result-count">找到 {{totalPage}} 条结果</p>
        <ul v-if="activeTab === 1" class="data-list">
          <li v-for="item in searchDataSetResults" class="item" :key="item.id" @click="toDetail(item)">
            <div class="tag">
              <img :src="item.coverUrl ? item.coverUrl : dattSetImgUrl">
              <div class="tag-right">
                <div class="title">{{item.name}}</div>
                <p class="desc">{{item.profile}}</p>
                <p class="tag-footer">
                  <span class="tag-footer-use">
                    <img class="tag-icon" src="@/common/image/icon/use-num.png">
                    <span>{{item.userProjectCount}}次使用</span>
                  </span>
                  <span class="tag-time">
                    {{new Date(item.createTime).Format("yyyy-MM-dd hh:mm:ss")}}
                  </span>
                  <span class="tag-footer-category">
                    <span v-for="tagItem in item.categoryList" :key="tagItem.id"><i class="circle"></i>{{tagItem.name}}</span>
                  </span>
                </p>
              </div>
            </div>
          </li>
        </ul>
        <ul v-if="activeTab === 2" class="project-list">
          <li v-for="item in searchProjectResults" class="item" :key="item.id" @click="toDetail(item)">
            <img class="image" :src="item.fileImage">
            <div class="tag">
              <div class="title">
                <span class="name-pro">{{ item.projectName }}</span>
                <div class="info">{{ item.userName }}</div>
              </div>
              <p class="desc">{{ item.profile }}</p>
              <p class="tag-footer">
                <span class="count"><i class="el-icon-share tag-icon"></i>{{ item.copyNumber }}次复制</span>
                <ul class="category">
                  <li class="list" v-for="(list, index) in item.categoryList" :key="index" v-show="index < 2">{{list.name}}</li>
                </ul>
              </p>
            </div>
          </li>
        </ul>
        <!-- <ul v-if="activeTab === 2" class="result-list">
          <li v-for="item in searchProjectResults" class="item" :key="item.id">
            <div class="tag">
              <div class="tag-content">
                <div class="title" @click="toDetail(item)">{{item.projectName}}</div>
                <div class="profile">{{item.profile ? item.profile : '无简介'}}</div>
              </div>
            </div>
            <hr>
          </li>
        </ul> -->
      </div>
      <div class="loadmore" v-if="hasNextPage">
        <p class="loadmore-box" @click="loadMore">
          <i v-show="loadingMore" class="el-icon-loading"></i>
          <span v-show="!loadingMore">加载更多...</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import { searchPublicDataSetList } from '@/api/dataset'
import { searchPublicProjectList } from '@/api/project'

import dataSetImg from '@/common/image/dataset.jpg'

export default {
  name: 'searchDetail',
  data () {
    return {
      // 搜索关键词
      searchText: '',
      activeTab: 1,
      // 总页数
      totalPage: 0,
      // 每页条数
      pageSize: 10,
      // 当前页
      pageNumber: 1,
      // 搜索结果
      searchDataSetResults: [],
      searchProjectResults: [],
      // 是否有下一页
      hasNextPage: false,
      loadingMore: false,
      bottom: false,
      finished: false,
      switchBtn: true,
      // 公开数据集默认图片
      dattSetImgUrl: dataSetImg
    }
  },
  computed: {
    ...mapGetters([
      'searchValue'
    ])
  },
  beforeMount () {
    window.addEventListener('scroll', this.handleScroll)
  },
  mounted () {
    this.searchText = this.searchValue
    this._searchPublicDataSetList(this.searchValue)
    this.storeSearchValue('')
  },
  methods: {
    // tab页切换
    toggleActive (val) {
      if (this.switchBtn) {
        this.activeTab = val
        this.switchBtn = false
        this.resetState()
        if (this.activeTab === 1) {
          this._searchPublicDataSetList(this.searchText)
        } else {
          this._searchPublicProjectList(this.searchText)
        }
      }
    },
    // 重置状态
    resetState () {
      this.finished = false
      this.searchDataSetResults = []
      this.searchProjectResults = []
      this.bottom = false
      this.loadingMore = false
      this.totalPage = 0
      this.pageNumber = 1
      this.hasNextPage = false
    },
    // 点击搜索
    clickSearch () {
      this.resetState()
      if (this.activeTab === 1) {
        this._searchPublicDataSetList(this.searchText)
      } else {
        this._searchPublicProjectList(this.searchText)
      }
    },
    // 跳转公开项目详情
    toOpenProjectDetail (item) {
      const { href } = this.$router.resolve({
        name: 'searchProjectResult',
        path: '/openproject/detail',
        query: { id: item.id }
      })
      window.open(href, '_blank')
    },
    // 跳转公开数据集详情
    toOpendatasetDetail () {
      const { href } = this.$router.resolve({
        name: 'searchDataSetResult',
        path: '/dataset/detail'
      })
      window.open(href, '_blank')
    },
    // 跳转详情
    toDetail (item) {
      if (this.activeTab === 1) {
        this.storeDataSet(item)
        this.toOpendatasetDetail()
      } else {
        this.toOpenProjectDetail(item)
      }
    },
    // 处理滚动事件
    handleScroll () {
      let footerHeight = document.getElementById('footer').clientHeight
      let scrollY = window.scrollY
      let visible = document.documentElement.clientHeight
      let pageHeight = document.documentElement.scrollHeight - (footerHeight / 2)
      let bottomOfPage = visible + scrollY >= pageHeight
      this.bottom = bottomOfPage || pageHeight < visible
    },
    // 加载更多
    loadMore () {
      this.loadingMore = true
      this.pageNumber++
      if (this.activeTab === 1) {
        this._searchPublicDataSetList(this.searchText)
      } else {
        this._searchPublicProjectList(this.searchText)
      }
    },
    // 搜索公开数据集列表
    _searchPublicDataSetList (searchText) {
      let query = `?search=${searchText}&pageNumber=${this.pageNumber}&pageSize=${this.pageSize}`
      searchPublicDataSetList(query).then(res => {
        this.loadingMore = false
        if (res.message.code === 0) {
          this.hasNextPage = res.data.hasNextPage
          this.totalPage = res.data.total
          this.searchDataSetResults = this.searchDataSetResults.concat(res.data.list)
          if (!this.hasNextPage) {
            this.finished = true
          }
        } else {
          this.finished = true
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
        this.switchBtn = true
      })
    },
    // 搜索公开项目列表
    _searchPublicProjectList (searchText) {
      let query = `?search=${searchText}&pageNumber=${this.pageNumber}&pageSize=${this.pageSize}`
      searchPublicProjectList(query).then(res => {
        this.loadingMore = false
        if (res.message.code === 0) {
          this.hasNextPage = res.data.hasNextPage
          this.totalPage = res.data.total
          this.searchProjectResults = this.searchProjectResults.concat(res.data.list)
          if (!this.hasNextPage) {
            this.finished = true
          }
        } else {
          this.finished = true
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
        this.switchBtn = true
      })
    },
    ...mapMutations({
      storeSearchValue: 'SET_SEARCH_VALUE',
      storePublicProject: 'SET_CUR_PUBULICPROJECT',
      storeDataSet: 'SET_CUR_DATASET'
    })
  },
  watch: {
    bottom: function (bottom) {
      if (this.finished === true) {
        return
      }
      if (bottom) {
        if (this.activeTab === 1) {
          this.loadingMore = true
          this.pageNumber++
          this._searchPublicDataSetList(this.searchText)
        } else {
          this.loadingMore = true
          this.pageNumber++
          this._searchPublicProjectList(this.searchText)
        }
      }
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" rel="stylus" scoped>
.search-detail
  .header-box
    background #F4F7F8
    .header
      height 100%
      max-width 1162px
      margin 0 auto
      .header-input
        display flex
        justify-content space-between
        padding 43px 0
        .input-element
          width 80%
      .header-tabs
        .nav-list
          width 100%
          height 100%
          position relative
          margin 0 auto
          max-width 1162px
          display flex
          .main-nav-list
            height 100%
            .main-nav-list-container
              display flex
              height 100%
              align-items flex-end
              .icon
                display inline-block
                width 30px
                height 50px
              .icon-data-box
                background url(../../common/image/icon-project/data-set--left-ico-no.png) no-repeat center
                background-size 13px 14px
              .icon-data-project
                background url(../../common/image/icon-project/search-detail-open-no.png) no-repeat center
                background-size 13px 14px
              .nav-item
                padding 0 10px
                font-weight 600
                font-size 14px
                display flex
                color #666
                justify-content center
                align-items center
                cursor pointer
                position relative
                margin 0
                >a
                  text-decoration none
                  cursor pointer
                >a:before
                  content ''
                  position absolute
                  top 0
                  right 0
                  bottom 0
                  left 0
              .link-item
                padding 0 15px
                height 44px
            .nav-item.active
              font-weight bold
              color #2d323b
              background #fff
              box-shadow 0 14px 0 -10px #f3c922 inset
              border-radius 5px 5px 0 0
              .icon-data-box
                background url(../../common/image/icon-project/data-set--left-ico.png) no-repeat center
                background-size 13px 14px
              .icon-data-project
                background url(../../common/image/icon-project/search-detail-open.png) no-repeat center
                background-size 13px 14px
  .content
    width 100%
    position relative
    margin 0 auto
    max-width 1162px
    padding 20px 0
    .content-inner
      background #fff
      border-radius 5px
      .result-count
        font-weight 600
        font-size 12px
        color #8d9091
        padding 0 10px 20px
      .data-list
        display flex
        flex-wrap wrap
        justify-content space-between
        .item
          width 80%
          transition all 0.2s linear
          margin-bottom 34px
          border 1px solid #E8E8E8
          border-radius 3px
          .tag
            display flex
            padding 20px
            cursor pointer
            transition all 0.3s ease-in-out
            .tag-right
              width 382px
            >img
              width 107px
              height 107px
              background-size 107px 107px
              margin-right 29px
            .tag-footer
              font-size 14px
              display flex
              align-items center
              justify-content space-between
              padding-top 27px
              .tag-footer-category
                font-size 14px
                color #666666
                >span
                  margin-left 13px
                .circle
                  width 8px
                  height 8px
                  background #b1b5b7
                  border-radius 4px
                  display inline-block
                  margin-right 5px
            &:hover
              box-shadow 0 0 10px 0 #B1B5B7
            .title
              font-weight 600
              font-size 18px
              color #2296F3
              padding-bottom 8px
            >p
              span
                margin-right 10px
            .desc
              height 40px
              line-height 20px
              font-size 14px
              color #6E6E6E
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              /*! autoprefixer: off */
              -webkit-box-orient vertical
              /* autoprefixer: on */
              -webkit-line-clamp 2
            .tag-icon
              width 12px
              height 12px
              display inline-block
              margin-right 5px
      .result-list
        .item
          width 100%
          display inline-block
          hr
            width 100%
            float left
            border none
            height 1px
            background #e0e0e0
          .tag
            display flex
            width 100%
            >img
              width 60px
              height 60px
              padding 10px
              box-sizing content-box
            .tag-content
              padding 10px
              .title
                font-size 18px
                margin-bottom 20px
                color #333
                font-weight bold
                cursor pointer
              .time
                padding 10px 0
                color #e0e0e0
              .profile
                height 20px
                overflow hidden
                line-height 20px
                font-size 12px
                color #8E9091
                text-overflow ellipsis
                display -webkit-box
                /*! autoprefixer: off */
                -webkit-box-orient vertical
                /* autoprefixer: on */
                -webkit-line-clamp 1
      .project-list
        display flex
        flex-wrap wrap
        justify-content space-between
        .item
          width 80%
          border-radius 5px
          background #ffffff
          transition all .2s linear
          position relative
          margin-bottom 34px
          padding 24px 20px
          border 1px solid #e8e8e8
          cursor pointer
          &:hover
            box-shadow 0 0 10px 0 #b1b5b7
          .image
            display inline-block
            width 108px
            height 108px
            vertical-align top
          .tag
            position relative
            display inline-block
            width 410px
            padding-left 28px
            .title
              width 100%
              height 22px
              margin-bottom 8px
              .name-pro
                display inline-block
                width 70%
                height 22px
                line-height 22px
                text-align left
                font-size 18px
                color #2296F3
                font-weight 600
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
              .info
                display inline-block
                width 30%
                height 22px
                line-height 22px
                text-align right
                font-size 12px
                color #8D9091
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
            .tag-footer
              margin-top 18px
              font-size 0
              .count
                display inline-block
                width 22%
                height 20px
                line-height 20px
                font-size 14px
                color #2D323B
                .tag-icon
                  font-size 14px
                  color #333
              .category
                display inline-block
                width 78%
                height 20px
                font-size 0
                text-align right
                .list
                  position relative
                  display inline-block
                  height 20px
                  line-height 20px
                  padding-left 16px
                  font-size 14px
                  color #666666
                  &:after
                    content ''
                    display block
                    width 6px
                    height 6px
                    background #B1B5B7
                    border-radius 50%
                    position absolute
                    top 7px
                    left 7px
            .desc
              height 40px
              overflow hidden
              display -webkit-box
              -webkit-line-clamp 2
              line-height 20px
              text-overflow ellipsis
              -webkit-box-orient vertical
              font-size 14px
              color #8E9091
              letter-spacing 0
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              /*! autoprefixer: off */
              -webkit-box-orient vertical
              /* autoprefixer: on */
              -webkit-line-clamp 2
    .loadmore
      display flex
      align-items center
      justify-content center
      height 50px
      .loadmore-box
        height 40px
        line-height 40px
        font-size 16px
        width 50%
        display flex
        align-items center
        justify-content center
        background #f5f7fa
        cursor pointer
</style>
